<template>
  <div>
    <!-- <div :class="{'color-selector-box': true, 'visible': visible}">
      <a-radio-group class="color-selector" :disabled="disabled" v-model="value" @change="onChange($event)">
        <a-radio-button 
          v-for="(option,index) in props.options.filter(item => item.type === props.optionType)" 
          :key="index" 
          :value='index' 
          :checked="clicked && value === -1? index === props.default : index === value"
          style="display: block;">
          <div class="color-box">
            <div v-for="(color, i) in option.value.slice(0, 8)" 
              :key="i" 
              class="theme-color-div" 
              :class="{'theme-color-div-not-checked': !clicked || index !== value }"
              :style="{'background-color': color }"/>            
          </div>
        </a-radio-button>
      </a-radio-group>
    </div> -->
    <div :class="{'color-selector-box': true, 'visible': visible}">
      <a-radio-group v-model="value" class="color-selector" :disabled="disabled" @change="onChange($event)">
        <a-radio-button 
          v-for="(option,index) in props.options.filter(item => item.type === props.optionType)" 
          :key="index" 
          :value='index' 
          :checked="(clicked && index === value)"
          style="display: block;">
          <div v-for="(color, i) in option.value.slice(0, 8)" 
            :key="i" 
            class="theme-color-div" 
            :style="{'background-color': color, 'opacity': !clicked || index !== value? option.opacity : 1 }"/>            
        </a-radio-button>
      </a-radio-group>
    </div>
  </div>
</template>

<script lang="ts">
import {Prop, Vue, Component, Watch} from 'vue-property-decorator'

@Component
export default class ThemeColorRadio extends Vue {
  @Prop() props: any
  @Prop({ type: Boolean, default() {
    return false
  } })
  clicked!:boolean
  public value: number = -1

  @Prop({ type: Boolean, default() {
    return false
  } })
  disabled!:boolean

  public visible = true

  @Watch('props', { immediate: true })
  init(){
    if(this.props.default !== undefined) {
      this.value = this.props.default
    }
  }

  @Watch('clicked', { immediate: true })
  clickedChange(){
    this.value = this.clicked ? this.value : -2
  }

  public onChange(event: any){
    this.value = event.target.value
    const currentColor = this.props.options[this.value].value
    this.$emit('change', currentColor)
  }

  public changeVisible() {
    this.visible = !this.visible
  }
}
</script>

<style lang="less" scoped>

/deep/ .ant-radio-button-wrapper {
  height: 20px;
}

/deep/ .ant-radio-button.ant-radio-button-checked {
  box-sizing: border-box;
  display: none;
  height: 20px;
}

.ant-radio-group-outline {
  width: 100%;
}

.ant-radio-button-wrapper {
  border-left: 2px solid rgb(217, 217, 217);
  border-radius: 2px;
  border-width: 2px;
  margin: 8px 0;
  padding: 3px 1.5px;
}

.ant-radio-button-wrapper-checked {
  border-left: 1.5px solid #5561ff;
}

.theme-color-div {
  display: inline-block;
  height: 14px;
  position: relative;
  top: -8px;
  width: 12.5%;
}


.theme-color-div-not-checked {
  opacity: 0.6;
}

</style>
